<script setup lang="ts">
const router = useRouter();
const data = ref([]);

const toPage = (route) => {
  navigateTo(route.path);
  useHead({
    title: route.name,
  });
};

/* 
  在sever目录里面，nuxt会自动检索里面的文件并生成请求路径。
  只有在seerv里面写的请求，才会成生ssr渲染
*/
const res = await useFetch("/api/list");
data.value = res.data;

console.log(router.options.routes);
</script>
<template>
  <div></div>
  <button
    v-for="route in router.options.routes"
    :key="route.name"
    @click="toPage(route)"
  >
    {{ route.name }}
  </button>
  <div v-for="(item, index) in data" :key="index">
    {{ item }}
  </div>
</template>

<style scoped></style>
